<template>
	<view class="subleturer">
		<view class="">
			<u-navbar
				title="讲师主页"
				:back-icon-size="28"
				back-icon-color="#000000"
				:title-size="28"
				:border-bottom="false"
				:back-text-style="{ color: '#000000', fontSize: '26rpx' }"
				title-color="#000000"
				:custom-back="goback"
				:background="background"
			></u-navbar>
			<view class="lt_card">
				<image class="leturerimg" :src="info.img" mode=""></image>
				<view class="leturer_info">
					<view class="le_text">
						<view class="le_role">金牌讲师预定</view>
						<view class="le_user u-flex u-col-center">
							<view class="tags">金牌讲师</view>
							<view class="le_name">
								<text style="margin-right: 20rpx;">{{ info.name }}</text>
								<text>{{ info.desc }}</text>
							</view>
						</view>
						<view class="le_adr">支持全国</view>
					</view>
				</view>

				<view class="le_main">
					<u-tabs-swiper
						ref="uTabs"
						:list="list"
						:is-scroll="false"
						:current="current"
						@change="tabsChange"
						:swiperWidth="750"
						:bar-height="2"
						:bar-width="324"
						:width="190"
						:height="100"
						:gutter="40"
						:font-size="40"
						active-color="#FBD101"
						activebg-color="#FBD101"
						:bold="true"
						:bar-style="barsty"
						:active-item-style="activesty"
					></u-tabs-swiper>
					<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
						<!-- 活动 -->
						<swiper-item class="swiper-item">
							<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
								<view class="scroll1">
									<view class="userintro">
										<view class="title">个人简介</view>
										<text class="info">{{ info.name }}，乐推金牌讲师</text>
									</view>
									<view class="userintro">
										<view class="title">人生格言</view>
										<text class="info">生命不是要超越别人,而是要超越自己。</text>
									</view>
								</view>
							</scroll-view>
						</swiper-item>
						<swiper-item class="swiper-item">
							<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
								<view class="scroll2">
									<view class="commentbox" v-for="(item, index) in commentList" :key="index">
										<view class="user_top u-flex u-col-center">
											<u-avatar :src="item.img" :size="48"></u-avatar>
											<text class="user_name u-p-l-18 " style="color:#FBD101;">{{ item.name }}</text>
										</view>
										<view class="u-m-t-14 u-m-b-16">
											<text class="timer" style="font-size: 24rpx;color: #DFDFDF;">{{ item.time }}</text>
										</view>
										<text class="u-line-3" style="height: 114rpx;">{{ item.info }}</text>
									</view>
								</view>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<u-gap height="16" bg-color="#F2F2F2"></u-gap>
			<view class="lt_card2">
				<view class="title">近期课程预告</view>
				<view class="coursebox">
					<view class="courseul u-m-t-24 u-m-b-24">
						<view class="courseli" v-for="(item, index) in courseList" :key="index">
							<u-image width="320rpx" height="150rpx" :src="item.img"></u-image>
							<view class="u-line-1 u-m-t-16">{{ item.title }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-divider :fontSize="28" color="gray" bg-color="#F2F2F2" :height="100" :padding-bottom="20">学习提升价值</u-divider>
	</view>
</template>

<script>
export default {
	name: 'haha',
	data() {
		return {
			courseList: [
				{
					img:
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600232902890&di=be229b4d6710caa3413c0e2b586d4b08&imgtype=0&src=http%3A%2F%2Fpics2.baidu.com%2Ffeed%2Fbd315c6034a85edf81702f204ba7a225dc54752a.jpeg%3Ftoken%3D40ea367f6b2ef995eaa6f5faf705a7d4',
					title: 'xxxxxxxxxxxxxx'
				},
				{
					img:
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600232902890&di=be229b4d6710caa3413c0e2b586d4b08&imgtype=0&src=http%3A%2F%2Fpics2.baidu.com%2Ffeed%2Fbd315c6034a85edf81702f204ba7a225dc54752a.jpeg%3Ftoken%3D40ea367f6b2ef995eaa6f5faf705a7d4',
					title: 'xxxxxxxxxxxxxx'
				},
				{
					img:
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600232902890&di=be229b4d6710caa3413c0e2b586d4b08&imgtype=0&src=http%3A%2F%2Fpics2.baidu.com%2Ffeed%2Fbd315c6034a85edf81702f204ba7a225dc54752a.jpeg%3Ftoken%3D40ea367f6b2ef995eaa6f5faf705a7d4',
					title: 'xxxxxxxxxxxxxx'
				},
				{
					img:
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600232902890&di=be229b4d6710caa3413c0e2b586d4b08&imgtype=0&src=http%3A%2F%2Fpics2.baidu.com%2Ffeed%2Fbd315c6034a85edf81702f204ba7a225dc54752a.jpeg%3Ftoken%3D40ea367f6b2ef995eaa6f5faf705a7d4',
					title: 'xxxxxxxxxxxxxx'
				}
			],
			commentList: [
				{
					img:
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600232902890&di=be229b4d6710caa3413c0e2b586d4b08&imgtype=0&src=http%3A%2F%2Fpics2.baidu.com%2Ffeed%2Fbd315c6034a85edf81702f204ba7a225dc54752a.jpeg%3Ftoken%3D40ea367f6b2ef995eaa6f5faf705a7d4',
					name: '130***2122',
					time: '2020-10-12',
					info: '老师讲得很清楚，深入浅出，赞一个！非常好的可课程，讲的很清晰，干货也很多，边听边做笔记，感觉能很好的消化，总之很有诚意的授课。'
				},
				{
					img:
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600232902890&di=be229b4d6710caa3413c0e2b586d4b08&imgtype=0&src=http%3A%2F%2Fpics2.baidu.com%2Ffeed%2Fbd315c6034a85edf81702f204ba7a225dc54752a.jpeg%3Ftoken%3D40ea367f6b2ef995eaa6f5faf705a7d4',
					name: '130***2122',
					time: '2020-10-12',
					info: '老师讲的挺好的，非常非常的好。好好的学习，努力激活机器。'
				}
			],
			activesty: {
				fontWeight: 500
			},
			barsty: {},
			tabs: [
				{
					name: '简介'
				},
				{
					name: '评价'
				}
			],
			list: [
				{
					name: '简介'
				},
				{
					name: '评价'
				}
			],
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			info: {
				img: '',
				name: '',
				desc: ''
			},
			search: '',
			background: {
				background: '#ffffff'
			}
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {
		if (option) {
			this.info = JSON.parse(decodeURIComponent(option.info));
			console.log(this.info);
		}
	},
	//挂载开始之前被调用
	beforeMount() {},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		// tabs通知swiper切换
		tabsChange(index) {
			this.swiperCurrent = index;
			console.log(index);
		},
		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			let dx = e.detail.dx;
			this.$refs.uTabs.setDx(dx);
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current;
			this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
			// console.log('current--', current);
			// if (current == 0) {
			// 	this.getactivitylist();
			// 	this.getactivityinfo();
			// }
			// else if (current == 1) {
			// 	// this.getexaminegoods()
			// } else {
			// 	this.getadoptgoods()
			// }
		},
		goback() {
			uni.navigateBack({
				delta: 1,
				animationType: 'pop-out',
				animationDuration: 200
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.subleturer {
	.lt_card {
		.leturerimg {
			width: 100%;
			height: 376rpx;
		}
		.leturer_info {
			.le_text {
				.le_role {
					margin: 34rpx 0 24rpx 42rpx;
					color: #fbd101;
					font-size: 28rpx;
				}
				.le_user {
					margin-left: 46rpx;
					margin-bottom: 24rpx;
					.tags {
						background-color: #ff452d;
						color: #ffffff;
						width: 112rpx;
						height: 40rpx;
						line-height: 40rpx;
						border-radius: 16rpx;
						font-size: 24rpx;
						text-align: center;
						font-family: Arial;
						margin-right: 28rpx;
					}
					.le_name {
						// height: 40rpx/*  */;
						color: rgb(16, 16, 16);
						font-size: 28rpx;
						font-weight: 600;
					}
				}
				.le_adr {
					width: 120rpx;
					height: 30rpx;
					line-height: 34rpx;
					border-radius: 12rpx;
					background-color: rgb(242, 242, 242);
					color: rgb(120, 120, 130);
					font-size: 24rpx;
					text-align: center;
					font-family: Arial;
					margin-left: 50rpx;
				}
			}
		}
		.le_main {
			padding-top: 20rpx;
			.swiper-box {
				height: 412rpx;
				.scroll1 {
					padding: 30rpx;
					.userintro {
						.title {
							color: #101010;
							font-size: 28rpx;
							padding-bottom: 20rpx;
						}
						.info {
							display: block;
							font-size: 24rpx;
							color: #787882;
							margin-bottom: 32rpx;
						}
					}
				}
				.scroll2 {
					padding: 30rpx;
					.commentbox {
						padding-bottom: 15px;
					}
				}
			}
		}
	}
	.lt_card2 {
		padding: 32rpx;
		.coursebox {
			.courseul {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				align-items: center;
				.courseli {
					margin-bottom: 32rpx;
				}
			}
		}
	}
}
</style>
